import { PlusOutlined, DownOutlined } from '@ant-design/icons';
import { Button, message, Row, Col, Spin } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { worktimechart } from './api';
import styles from './index.less';
import { map } from 'lodash';

const TableList = () => {
  const [loading, setLoading] = useState(false);
  const [listData, setListData] = userState([]);

  /**
   * @zh-CN 列表数据
   * @param fields
   */

  const getListData = fields => {
    setLoading(true);
    worktimechart().then(res => {
      setLoading(false);
      if (res.code === 0) {
        setListData(res.data?.dataunits || []);
      } else {
        message.error(res.msg || '操作失败');
      }
      console.log(1111, res);
    });
  };

  useEffect(() => {
    getListData();
  }, []);

  const reset = () => {};

  return (
    <PageContainer>
      <Spin spinning={loading}>
        <div className={styles.wrap}>
          <div className={styles.weekBox}>
            <Row justify="start">
              <Col span={4} className={styles.spans}>
                星期
              </Col>
              <Col span={2} className={styles.spans}>
                一
              </Col>
              <Col span={2} className={styles.spans}>
                二
              </Col>
              <Col span={2} className={styles.spans}>
                三
              </Col>
              <Col span={2} className={styles.spans}>
                四
              </Col>
              <Col span={2} className={styles.spans}>
                五
              </Col>
              <Col span={2} className={styles.spans}>
                六
              </Col>
              <Col span={2} className={styles.spans}>
                日
              </Col>
            </Row>
          </div>

          <div className={styles.taskBox}>
            <div className={styles.title}>映射表</div>
            <Row justify="center">
              <Col span={1}>0</Col>
              <Col span={1}>1</Col>
              <Col span={1}>2</Col>
              <Col span={1}>3</Col>
              <Col span={1}>4</Col>
              <Col span={1}>5</Col>
              <Col span={1}>6</Col>
              <Col span={1}>7</Col>
              <Col span={1}>8</Col>
              <Col span={1}>9</Col>
              <Col span={1}>10</Col>
              <Col span={1}>11</Col>
              <Col span={1}>12</Col>
              <Col span={1}>13</Col>
              <Col span={1}>14</Col>
              <Col span={1}>15</Col>
              <Col span={1}>16</Col>
              <Col span={1}>17</Col>
              <Col span={1}>18</Col>
              <Col span={1}>19</Col>
              <Col span={1}>20</Col>
              <Col span={1}>21</Col>
              <Col span={1}>22</Col>
              <Col span={1}>23</Col>
            </Row>
          </div>

          {/* <div className={styles.taskBox}>

          {listData.map(item => {
            return  <div>
            <div className={styles.title}>映射表</div>
            <Row justify="center">
              <Col span={1}>0</Col>
              <Col span={11}>1</Col>
              <Col span={1}>2</Col>
              <Col span={1}>3</Col>
              <Col span={1}>4</Col>
              <Col span={1}>5</Col>
              <Col span={1}>6</Col>
              <Col span={1}>7</Col>
            </Row>
        </div>
          })} */}

          <div className={styles.taskBox}>
            <div className={styles.title}>映射表</div>
            <Row justify="center">
              <Col span={1}>0</Col>
              <Col span={11}>1</Col>
              <Col span={1}>2</Col>
              <Col span={1}>3</Col>
              <Col span={1}>4</Col>
              <Col span={1}>5</Col>
              <Col span={1}>6</Col>
              <Col span={1}>7</Col>
            </Row>
          </div>
        </div>
      </Spin>
    </PageContainer>
  );
};

export default TableList;
